<template>
  <div style="height:100%;position:relative">
    <!-- 顶部导航栏 -->
    <van-tabs v-model="active" swipeable>
      <!-- 频道列表 -->
      <van-tab :key='item.id' v-for="item in channle" :title="item.name">
        <!-- 频道对应的文章列表 -->
        <div class="scroll-wrapper">
          <van-pull-refresh v-model="currentChannel.isLoading" @refresh="onRefresh">
            <van-list :error.sync='currentChannel.error' error-text="加载数据失败" v-model="currentChannel.loading" :finished="currentChannel.finished" finished-text="没有更多了" @load="onLoad">
              <!-- 三张图效果 -->
              <van-cell :to="'/detail/' + item.art_id.toString()" v-for="item in currentChannel.article" :key="item.art_id.toString()">
                <div class="article_item">
                  <h3 class="van-ellipsis">{{item.title}}</h3>
                  <div class="img_box" v-if="item.cover.type === 3">
                    <van-image lazy-load class="w33" fit="cover" :src="item.cover.images[0]" />
                    <van-image lazy-load class="w33" fit="cover" :src="item.cover.images[1]" />
                    <van-image lazy-load class="w33" fit="cover" :src="item.cover.images[2]" />
                  </div>:
                  <div class="img_box" v-if="item.cover.type === 1">
                    <van-image lazy-load class="w100" fit="cover" :src="item.cover.images[0]" />
                  </div>
                  <div class="info_box">
                    <span>{{item.aut_name}}</span>
                    <span>{{item.comm_count}}评论</span>
                    <span>{{item.pubdate | timeFormat}}</span>
                    <!-- x号 -->
                    <span class="close" @click="toggleBox(item.art_id)">
                      <van-icon name="cross"></van-icon>
                    </span>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 弹出层 -->
    <!-- :articleId='articleId' 因为点击不感兴趣的时候需要根据id值判断不感兴趣的是哪条文章 -->
    <!-- <more-action :value='show' @action-success='actionSuccess' :articleId='articleId' @input="getBox"></more-action> -->
    <more-action :value='show' @action-success='actionSuccess' :articleId='articleId' @input="show=$event"></more-action>
    <!-- 编辑弹出层 -->
    <!-- <edit-channel v-model="isEdit" @update-active='active=$event' :active='active' :channels='channle'></edit-channel> -->
    <edit-channel @add-success='addSuccess' @delete-success='deleteSuccess' v-model="isEdit" :active.sync='active' :channels='channle'></edit-channel>
    <!-- 频道汉堡图标 -->
    <span @click='isEdit=true' class="bar_btn" slot="nav-right">
      <van-icon name="wap-nav"></van-icon>
    </span>
  </div>

</template>
<script>
import { getChannles, getArticles } from '@/api/channel.js'
import EditChannel from '@/components/editChannel.vue'
// 导入子组件
import MoreAction from '@/components/moreAction.vue'
export default {
  name: 'Home',
  components: {
    MoreAction,
    EditChannel
  },
  data () {
    return {
      // 编辑弹出层
      isEdit: false,
      // 当前点中的文章id
      articleId: null,
      // 弹窗状态
      show: false,
      // 频道列表
      channle: [],
      // 文章列表数据
      list: [],
      // 控制下拉刷新状态
      isLoading: false,
      // 控制单次加载的状态（true表示正在加载）：load事件触发时，自动修改为true
      loading: false,
      // 控制加载完成的状态，需要手动设置为true 表示加载完成
      finished: false,
      // 默认选中项 值表示选项卡的索引值
      active: 0
    }
  },
  computed: {
    // myChannle () {
    //   return this.channle.map(item => {
    //     return {
    //       // 频道id
    //       id: item.id,
    //       // 频道name
    //       name: item.name,
    //       // 频道对应的文章列表
    //       article: [],
    //       // 列表的加载状态
    //       loading: false,
    //       // 加载完成的标志
    //       finished: false,
    //       // 刷新完成的标志
    //       isLoading: false,
    //       // 获取数据的时间戳
    //       timestamp: Date.now()
    //     }
    //   })
    // }

    // 获取当前频道
    currentChannel () {
      // this.active 是当前频道的索引值
      // this.channle 是频道列表
      return this.channle[this.active]
    }
  },
  methods: {
    // 添加频道
    async addSuccess (ch) {
      this.channle.push(ch)
    },
    // 删除频道
    async deleteSuccess (index) {
      this.channle.splice(index, 1)
    },
    // 弹出层
    actionSuccess () {
      // 关闭弹窗
      this.show = false
      // 删除不感兴趣的文章
      // 根据index获取对应的内容
      const index = this.currentChannel.article.findIndex(item => {
        return item.art_id.toString() === this.articleId.toString()
      })
      // console.log(index)
      // 删除索引为index的那一项
      this.currentChannel.article.splice(index, 1)
    },
    toggleBox (id) {
      // 将弹出层弹出
      this.show = true
      // 当前文章的id值 把值给一个属性articleId  因为要给子组件传值
      this.articleId = id.toString()
    },
    // status 是子组件传过来的值
    // getBox (status) {
    //   console.log(status)
    //   // 当子组件关闭弹窗时  status为false  给show
    //   this.show = status
    // },
    // 获取频道对应的文章列表
    async getArticles () {
      const ret = await getArticles({
        // 用于分页的时间戳
        timestamp: this.currentChannel.timestamp,
        // 当前频道的id
        channel_id: this.currentChannel.id,
        // 是否置顶（固定为1就行）
        with_top: 1
      })
      return ret.data
      // ret中有时间戳和列表
      // console.log(ret)
    },
    // 获取频道列表
    async getChannle () {
      const ret = await getChannles()
      // console.log(ret)
      // 将发送请求得到的结果里新加几个属性  本来是只有ID和name的
      // 新增的属性是用于每一个频道都有不同的状态和列表
      this.channle = ret.data.channels.map((item) => ({
        // 频道id
        id: item.id,
        // 频道name
        name: item.name,
        // 频道对应的文章列表
        article: [],
        // 列表的加载状态
        loading: false,
        // 加载完成的标志
        finished: false,
        // 刷新完成的标志
        isLoading: false,
        // 获取数据的时间戳
        timestamp: Date.now(),
        // 数据加载失败
        error: false
      }))
      // console.log(this.channle)
    },
    // 下拉刷新
    async onRefresh () {
      // 重置时间戳为最新当前时间
      // this.currentChannel.timestamp = Date.now()
      // let ret = null
      // try {
      //   ret = await this.getArticles()
      //   console.log(ret)
      // } catch (error) {
      //   return this.$toast.fail('刷新失败')
      // }
      // // 手动设置列表加载状态为true
      // this.currentChannel.isLoading = false

      // if (ret.results.length > 0) {
      //   // 有数据，覆盖默认的列表
      //   this.currentChannel.article = ret.results
      //   // 重置状态位
      //   this.currentChannel.finished = false
      //   // 更新时间戳
      //   this.currentChannel.timestamp = ret.pre_timestamp
      //   // 如果不够一页数据 重新加载list列表
      //   this.onLoad()
      // } else {
      //   this.$toast.fail('没有数据要更新')
      // }

      // 下拉刷新时需要置空列表
      this.currentChannel.article = []
      // 时间戳设置为当前时间
      this.currentChannel.timestamp = Date.now()
      // 如果onLoad自动触发，那么loading会自动变成true
      // loading值为true表示list组件监听到列表正在加载
      this.currentChannel.loading = true
      await this.onLoad()
      this.currentChannel.isLoading = false
    },
    // 加载
    async onLoad () {
      // 使用定时器虚拟一个异步请求
      // setTimeout(() => {
      //   // 每次加载都加载10条出来
      //   for (let i = 0; i < 10; i++) {
      //     // 将值给list  数组的长度都是一个新元素的索引值
      //     this.list.push(this.list.length + 1)
      //   }
      //   // 当加载完成后 将加载中的状态关闭  就不会再显示加载中了
      //   //  因为每次加载都是自动将值设置为true 需要手动改为false
      //   this.loading = false
      //   // 如果list列表长度等于40  就让加载完成  显示没有更多了
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)

      // 获取一个新的数据
      let ret = null
      try {
        ret = await this.getArticles()
        // 把输入追加到当前频道关联的文章列表数组中
        this.currentChannel.article.push(...ret.results)
      } catch (error) {
        // 激发错误提示
        this.currentChannel.error = true
        return this.$toast.fail('加载文章列表数据失败')
      }
      // 如果本页加载完成了就把加载状态改为false
      this.currentChannel.loading = false
      if (ret.pre_timestamp) {
        // 如果还有时间戳说明列表还有
        // 就把ret里面的时间戳给当前频道时间戳
        this.currentChannel.timestamp = ret.pre_timestamp
      } else {
        // 否则就加载完成了  不再加载
        this.currentChannel.finished = true
      }
    }
  },
  async created () {
    await this.getChannle()
    // this.getArticles()
  }
}
</script>
<style scoped lang="less">
.van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  /deep/ .van-tabs__wrap {
    height: 36px;
    padding-right: 36px;
    .van-tab {
      line-height: 36px;
    }
    .van-tabs__line {
      background-color: #3296fa;
      height: 2px;
    }
  }
  /deep/ .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  /deep/ .van-tab__pane {
    height: 100%;
    .scroll-wrapper {
      height: 100%;
      overflow-y: auto;
    }
  }
}
.bar_btn {
  width: 36px;
  height: 35px;
  position: absolute;
  top: 0;
  right: 0;
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    box-shadow: 0 0 10px #999;
    transform: scale(1, 0.6);
  }
  .van-icon-wap-nav {
    width: 100%;
    height: 100%;
    background: #fff;
    text-align: center;
    line-height: 35px;
    position: relative;
    z-index: 1000;
    &::before {
      font-size: 20px;
    }
  }
}
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 90px;
    }
    .w100 {
      width: 100%;
      height: 180px;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;
    span {
      padding-right: 10px;
      &.close {
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}
</style>
